<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>global</title>
</head>
<body>
    <div id="app">
        <abc :items="lessons"></abc>
    </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

    Vue.component("abc",{
        // 直接使用props接收到的属性来渲染页面
        template:`
            <ul>
               <li v-for="item in items">{{item.id}}:{{item.name}}</li>
            </ul>
        `,
        props: {
            items:{
                type:Array,
                default:[]
            }
        }
    })

    var app = new Vue({
        el:"#app",
        data:{
        lessons:[
            {id:1, name: 'java'},
            {id:2, name: 'php'},
            {id:3, name: 'ios'},
        ]
    }
    })
</script>
</body>
</html>